<template>
  <div class="page">
    <h2>统计与质量监控</h2>

    <div class="controls">
      <el-input v-model="q" placeholder="按工号/姓名/关键字搜索" clearable style="flex:1" @clear="onClear" />

      <el-select v-model="period" placeholder="时间范围" style="width:180px">
        <el-option label="近7天" value="7" />
        <el-option label="近30天" value="30" />
        <el-option label="近90天" value="90" />
      </el-select>

      <div style="display:flex;gap:8px">
        <el-button @click="refresh">刷新</el-button>
        <el-button @click="exportCSV">导出报告</el-button>
      </div>
    </div>

    <div class="kpis">
      <el-card class="kpi" shadow="never">
        <div class="kpi-title">评估量</div>
        <div class="kpi-value">{{stats.assessments}}</div>
        <div class="kpi-sub">近{{period}}天</div>
      </el-card>
      <el-card class="kpi" shadow="never">
        <div class="kpi-title">高风险人数</div>
        <div class="kpi-value">{{stats.highRisk}}</div>
        <div class="kpi-sub">需要优先随访</div>
      </el-card>
      <el-card class="kpi" shadow="never">
        <div class="kpi-title">危机事件</div>
        <div class="kpi-value">{{stats.crisis}}</div>
        <div class="kpi-sub">含自伤/自杀类</div>
      </el-card>
      <el-card class="kpi" shadow="never">
        <div class="kpi-title">干预次数</div>
        <div class="kpi-value">{{stats.interventions}}</div>
        <div class="kpi-sub">个体/团体合计</div>
      </el-card>
    </div>

    <h3 style="margin-top:12px">趋势（简表）</h3>
    <el-table :data="trend" stripe border style="width:100%;margin-top:8px">
      <el-table-column prop="date" label="日期" width="140" />
      <el-table-column prop="assessments" label="评估数" width="120" />
      <el-table-column prop="highRisk" label="高风险" width="120" />
      <el-table-column prop="crisis" label="危机事件" width="120" />
      <el-table-column prop="interventions" label="干预次数" width="120" />
    </el-table>

    <h3 style="margin-top:12px">最近干预记录</h3>
    <el-table :data="recent" stripe border style="width:100%;margin-top:8px">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="person" label="工号/姓名" width="200" />
      <el-table-column prop="type" label="类型" width="140" />
      <el-table-column prop="date" label="日期" width="160" />
      <el-table-column prop="summary" label="摘要" />
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-button size="small" @click="view(row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const period = ref('30');
const q = ref('');

const stats = reactive({ assessments:0, highRisk:0, crisis:0, interventions:0 });

// sample trend data -- summarized trends commonly included in quality monitoring dashboards
const trend = ref([
  { date:'2025-10-20', assessments:5, highRisk:1, crisis:0, interventions:2 },
  { date:'2025-10-21', assessments:8, highRisk:2, crisis:1, interventions:3 },
  { date:'2025-10-22', assessments:6, highRisk:0, crisis:0, interventions:1 }
]);

const recent = ref([
  { id:101, person:'F001 - 张强', type:'个体干预', date:'2025-10-22 10:00', summary:'CBT短程干预，情绪稳定' },
  { id:102, person:'F002 - 李静', type:'危机干预', date:'2025-10-21 09:30', summary:'自伤风险评估并转诊' }
]);

onMounted(()=>{ recalc(); });

function recalc(){
  // simple aggregation logic based on sample arrays
  stats.assessments = trend.value.reduce((s,i)=>s+i.assessments,0);
  stats.highRisk = trend.value.reduce((s,i)=>s+i.highRisk,0);
  stats.crisis = trend.value.reduce((s,i)=>s+i.crisis,0);
  stats.interventions = trend.value.reduce((s,i)=>s+i.interventions,0);
}

function refresh(){ ElMessage.success('数据已刷新（示例数据）'); recalc(); }

function view(id){ const it = recent.value.find(x=>x.id===id); if(it){ ElMessage.info(`${it.person} ${it.type} ${it.date}\n${it.summary}`); } }

function exportCSV(){ const csv = [ ['metric','value'], ['评估量',stats.assessments], ['高风险人数',stats.highRisk], ['危机事件',stats.crisis], ['干预次数',stats.interventions] ]; const csvContent = csv.map(r=>r.map(cell=>`"${String(cell).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([csvContent],{type:'text/csv;charset=utf-8;'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href=url; a.download='firefighter_stats.csv'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }

function onClear(){ }
</script>

<style scoped>
.page{font-family: Arial, "Microsoft YaHei", sans-serif; margin:10px;}
h2{margin-top:-10px}
.controls{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.kpis{display:flex;gap:12px}
.kpi{flex:1;text-align:center;padding:12px}
.kpi-title{color:#666}
.kpi-value{font-size:22px;font-weight:600;margin-top:6px}
.kpi-sub{color:#999;font-size:12px;margin-top:6px}
.muted{color:#666;font-size:13px}
</style>